<template>
  <!-- 全景分析 -->
  <view class="content">
    <!-- 设备状态说明 -->
    <view class="box-select flex flex-x-end flex-y-center bg-white fz30">
      <view class="btn" :class="state.active === 1 ? 'cur' : ''" @click="tabChange(1)">日</view>
      <view class="btn" :class="state.active === 2 ? 'cur' : ''" @click="tabChange(2)">月</view>
      <view class="btn">
        <uni-datetime-picker v-model="state.range" type="daterange" @change="onChange"><sw-icons icon="icon-rili" size="30" color="#ffa200"></sw-icons></uni-datetime-picker>
      </view>
    </view>

    <!-- 统计图表 -->
    <view class="title flex flex-x-center flex-y-center">
      <sw-icons class="mr20" icon="icon-rili" size="40" color="#ffa200"></sw-icons>
      {{ state.active === 1 ? '近一个月' : state.active === 2 ? '近一年' : `${state.param.startTime} - ${state.param.endTime}` }}经营统计
    </view>
    <view class="charts-box"><qiun-data-charts type="line" :opts="state.opts" :chartData="state.chartData" :disableScroll="true" :onzoom="true" :ontouch="true" /></view>
    <view class="more t-r"><button size="mini" class="btn-yellow" @click="$jump.navigateTo(`/pages/analysis/details?param=${JSON.stringify(state.param)}`)">查看详情</button></view>

    <!-- 全景图表 -->
    <view class="pt30 pb20 bg-white">
      <view class="flex flex-x-around fz26 t-c" v-if="state.statistics">
        <view class="flex1">
          <view class="bold fz30">{{ state.statistics.totalOnlineOrderCount || 0 }}</view>
          <view class="mt30 gray9">订单数量</view>
        </view>
        <view class="flex1">
          <view class="bold fz30">{{ state.statistics.totalOrderUserCount || 0 }}</view>
          <view class="mt30 gray9">订单用户数</view>
        </view>
        <view class="flex1">
          <view class="bold fz30">{{ state.statistics.totalOnlineOrderAmount || 0 }}</view>
          <view class="mt30 gray9">订单金额</view>
        </view>
        <view class="flex1">
          <view class="bold fz30">{{ state.statistics.totalOrderRefundAmount || 0 }}</view>
          <view class="mt30 gray9">订单退款金额</view>
        </view>
      </view>
      <view class="title flex flex-x-center flex-y-center">
        <sw-icons class="mr20" icon="icon-rili" size="40" color="#ffa200"></sw-icons>
        全景数据统计分析
      </view>
      <view class="charts-box pb20"><qiun-data-charts type="column" :opts="state.opts2" :chartData="state.chartData2" /></view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { adminStatistics } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const state = reactive({
  active: 1,
  param: {
    periodType: 'day',
    startTime: '',
    endTime: ''
  },
  statistics: {},
  range: [],
  opts: {},
  chartData: {},
  opts2: {},
  chartData2: {}
});

// 折线图配置基础属性
state.opts = {
  color: ['#487fff', '#856bc4', '#096', '#ffa200'],
  padding: [15, 10, 0, 15],
  legend: {},
  enableScroll: true,
  xAxis: {
    fontSize: 10,
    scrollShow: true,
    itemCount: 4
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2
  },
  extra: {
    line: {
      type: 'curve',
      width: 2
    }
  }
};

// 统计图配置基础属性
state.opts2 = {
  padding: [15, 15, 0, 5],
  legend: {
    show: false,
    position: 'top'
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [
      {
        min: 0,
        unit: '元',
        color: '#f00'
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 30,
      activeBgColor: '#000000',
      activeBgOpacity: 0.08
    }
  }
};

const loadData = () => {
  adminStatistics(state.param).then(res => {
    if (res.success) {
      state.statistics = {
        totalOnlineOrderCount: res.result.totalOnlineOrderCount,
        totalOrderUserCount: res.result.totalOrderUserCount,
        totalOnlineOrderAmount: res.result.totalOnlineOrderAmount,
        totalOrderRefundAmount: res.result.totalOrderRefundAmount
      };

      const categories = [];
      const onlineOrderCount = [];
      const orderUserCount = [];
      const onlineOrderAmount = [];
      const onlineRefundAmount = [];
      res.result.list.forEach(item => {
        categories.push(item.dateTime);
        onlineOrderCount.push(item.onlineOrderCount);
        orderUserCount.push(item.orderUserCount);
        onlineOrderAmount.push(item.onlineOrderAmount);
        onlineRefundAmount.push(item.onlineRefundAmount);
      });

      // 设置折线图数据
      state.chartData = {
        categories,
        series: [
          {
            name: '在线订单数',
            data: onlineOrderCount
          },
          {
            name: '订单用户数',
            data: orderUserCount
          },
          {
            name: '在线订单金额',
            data: onlineOrderAmount
          },
          {
            name: '订单退款金额',
            data: onlineRefundAmount
          }
        ]
      };

      // 设置统计图数据
      state.chartData2 = {
        categories: ['订单数量', '订单用户数', '订单金额', '订单退款金额'],
        series: [
          {
            name: '全景数据统计分析',
            data: [state.statistics.totalOnlineOrderCount, state.statistics.totalOrderUserCount, state.statistics.totalOnlineOrderAmount, state.statistics.totalOrderRefundAmount]
          }
        ]
      };
    }
  });
};

// 选择日期
const onChange = e => {
  state.param.startTime = e[0];
  state.param.endTime = e[1];
  loadData();
};

// tab改变
const tabChange = index => {
  state.active = index;
  let arr = [];
  if (index === 1) {
    arr = proxy.$filter.getDayAgo(30);
    state.param.periodType = 'day';
  } else if (index === 2) {
    arr = proxy.$filter.getMonthAgo(12);
    state.param.periodType = 'month';
  }
  state.param.startTime = arr[0];
  state.param.endTime = arr[1];
  loadData();
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  tabChange(1);
});
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.box-select {
  padding: 20rpx 10rpx;
  .btn {
    position: relative;
    z-index: 90;
    width: 80rpx;
    line-height: 60rpx;
    margin-right: 10rpx;
    text-align: center;
    color: @orange;
    &.cur {
      color: #fff;
      background: @orange;
    }
  }
}

.title {
  padding: 40rpx 0;
}

.charts-box {
  width: 750rpx;
  height: 600rpx;
  background: #fff;
}

.more {
  padding: 25rpx;
}
</style>
